<script>
import {updatePassword, updateUser, userDetail} from "../../../api/user";
import {ElMessage} from "element-plus";
import {uploadImage} from "../../../api/file";

export default {
    name: "UpdatePassword",
    data() {
        return {
            editBox: new Map(),
            user: {},
            file: null,
            rePassword:''
        }
    },

    methods: {
        showEdit(key) {
            var old = this.editBox.get(key);
            this.editBox.set(key, !old)
        },
        getUser() {
            if (!this.$store.state.user) {
                const id = this.$store.state.userInfo.userId
                userDetail(id)
                    .then(res => {
                        if (res.code === 200) {
                            this.$store.commit('setUser', res.data)
                            this.user = res.data
                        }
                    })
            } else this.user = this.$store.state.user
        },
        back() {
            this.$router.back()
        },
        update(){
            if(!this.user.oldPassword)
                ElMessage.error("请输入旧密码")
            else if (!this.rePassword||!this.user.newPassword||this.rePassword!==this.user.newPassword)
                ElMessage.error("密码不一致")
            else {
                updatePassword(this.user)
                .then(res=>{
                    if(res.code===200)
                        ElMessage.success("修改成功")
                    else ElMessage.error("修改失败")
                })
            }
        }
    },
    created() {
        this.getUser()
    }
}
</script>

<template>
    <div class="flex row align-center center group-box">
        <div class="flex column align-center group-left">
            <div style="width: 100%">
                <h2>修改密码</h2>
                <el-divider style="margin: 0 0 10px 0;!important;"/>
            </div>
            <div class="flex row align-center" style="width: 100%;cursor: pointer;margin:0 0 1em 0" @click="back">
                <i class="iconfont icon-back" style="font-size: 17pt"></i>
                <span>返回上一层</span>
            </div>
            <div class="flex row center align-center" style="margin-bottom: 1em">
                <span style="width: 100px">旧密码</span>
                <el-input v-model="user.oldPassword"  style="width: 300px"></el-input>
            </div>
            <div class="flex row center align-center" style="margin-bottom: 1em">
                <span style="width: 100px">新密码</span>
                <el-input v-model="user.newPassword"  style="width: 300px"></el-input>
            </div>
            <div class="flex row center align-center" style="margin-bottom: 1em">
                <span style="width: 100px">重复密码</span>
                <el-input v-model="rePassword"   style="width: 300px"></el-input>
            </div>
            <div class="flex flex-end" style="width: 400px;margin-top: 1rem">
                <el-button @click="update">修改密码</el-button>
            </div>


        </div>
    </div>
</template>

<style lang="scss" scoped>
.group-box {
    height: 100%;
    width: 100%
}

.group-left {
    margin: 30px 10px;
    height: calc(100% - 60px);
    width: calc(70% - 10px);
    background: white;
    padding: 0 60px;
    border-radius: 15px;
    overflow-y: auto;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
}
</style>
